<template>
	<view class="u-p-30">
		<navBar title="城市选择" />
		<view v-if="orgCityName">
			<view class="hot">你所在的城市</view>
			<view class="u-p-t-30 u-p-b-30">
				<u-row>
					<u-col span="3">
						<view class="btn u-line-1" @click="chooseCity(orgCityName)">{{orgCityName}}</view>
					</u-col>
				</u-row>
			</view>
		</view>

		<view v-if="historyCity.length >0">
			<view class="u-m-b-30">历史访问城市</view>
			<u-row :gutter="16">
				<u-col span="3" class="u-m-b-30" v-for="(item,index) in historyCity" :key="index">
					<view class="btn u-line-1" @click="chooseCity(item)">{{item}}</view>
				</u-col>
			</u-row>
		</view>

		<view v-if="hotCity.length >0">
			<view class="hot">热门城市</view>
			<view class="u-p-t-20 u-p-b-20">
				<u-row :gutter="16">
					<u-col span="3" class="u-m-b-30" v-for="(item,index) in hotCity" :key="index">
						<view class="btn u-line-1" @click="chooseCity(item.cityName)">{{item.cityName}}</view>
					</u-col>
				</u-row>
			</view>
		</view>

		<u-index-list :scrollTop="scrollTop" :index-list="FirstPin">
			<view v-for="(item, name) in cityData" :key="name">
				<u-index-anchor :index="name" />
				<u-cell-item :arrow="false" :title="city" v-for="(city,index) in item" :key="index" @click="chooseCity(city)"></u-cell-item>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	import navBar from '@/components/navbar/index'
	export default {
		data() {
			return {
				cityData: {},
				orgCityName: '',
				hotCity: [],
				historyCity: [],

				scrollTop: 0,
				FirstPin: [],
				allCityList: [],
			}
		},
		components: {
			navBar
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		mounted() {
			var _this = this;
			let amap_key = "914e53e8abb36cddf40df408b4e41912"
			uni.getLocation({
				success(res) {
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo',
						data: {
							location: `${res.longitude},${res.latitude}`, 
							key: amap_key,
							poitype: '城市'
						},
						success(res) {
							_this.orgCityName = res.data.regeocode.addressComponent.city;
						}
					});
				}
			});
			this.historyCity = JSON.parse(sessionStorage.getItem('historyCity'))==null?[]:JSON.parse(sessionStorage.getItem('historyCity'));
			this.getData();
		},
		methods: {
			getData(){
				this.hotCity = [];
				var arr = [];
				this.cityData = {};
				this.$u.api.getCityList().then(res=>{
					if(res.code==0){
						res.data.forEach(item=>{
							if(item.hot==1){
								this.hotCity.push(item);
							}
							arr.push(item.letter);
							this.FirstPin = Array.from(new Set(arr)).sort()
						});
						
						this.FirstPin.forEach((item) => {
							this.cityData[item] = [];
							res.data.forEach((el) => {
								if (el.letter == item) {
									this.cityData[item].push(el.cityName)
								}
							})
						});
					}
				})
			},
			chooseCity(name) {
				uni.setStorageSync('city', name);
				let isTrue = this.historyCity.find(res => {
				    return res == name;
				});
				if(isTrue==undefined){
					this.historyCity.push(name);
					sessionStorage.setItem('historyCity',JSON.stringify(this.historyCity));
				}
				this.back();
			},
			back() {
				// #ifdef H5
				window.history.back()
				// #endif
				// #ifdef APP-PLUS
				uni.navigateBack()
				// #endif
			}
		}
	}
</script>

<style scoped lang="scss">
	.btn {
		border: 1px solid $u-border-color;
		border-radius: 10rpx;
		text-align: center;
		color: $u-content-color;
		padding: 0 12rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		width: 90%;
	}
</style>
